/*
 * @Author: your name
 * @Date: 2022-01-06 17:57:34
 * @LastEditTime: 2022-04-02 17:33:49
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \web\src\router\course\index.jsx
 */
import React, { useState, useEffect } from "react";
import "./index.css";
import Header from "../../components/header";
import Cookie from "../../assets/common/cookie";
import request from "../../network/index";
import { useNavigate, Outlet } from "react-router-dom";
import { EditFilled, BookOutlined, PieChartFilled } from '@ant-design/icons';


const Course = () => {
  const initKey = window.location.pathname.substring(1).split('/');
  const [Keys, setKeys] = useState(initKey.length === 3 ? initKey[2] : 'homework');
  const [courseInfo, setCourseInfo] = useState({});
  const navigate = useNavigate();
  const userInfo = Cookie.get("userInfo")
    ? JSON.parse(Cookie.get("userInfo"))
    : "";

  useEffect(() => {
    getCourseInfo(initKey[1]);
  }, []);
  // 跳转路由及选中状态切换
  const clickHandler = key => {
    if(key !== Keys) {
      navigate(key);
      setKeys(key);
    }
  }

  const getCourseInfo = async id => {
    const {list} = await request.get('/student/detail?id='+id);
    console.log('course',list);
    setCourseInfo(list);
  }

  return (
    <div className="course" id="course">
      <Header />
      <div className="context">
        <div className="left">
          <div className="header">
            <img
              src={courseInfo.url}
              alt=""
            />
            <p>{courseInfo.name}</p>
          </div>
          <div className={(Keys === 'homework' || Keys === 'jobSettings') ? 'selected':''} onClick={()=>{clickHandler(Number(userInfo.type) === 2 ? 'jobSettings' : 'homework')}}><BookOutlined /> 作业</div>
          <div className={(Keys === 'overview' || Keys === 'learningRecords') ? 'selected':''} onClick={()=>{clickHandler(Number(userInfo.type) === 2 ? 'learningRecords' : 'overview')}}>{Number(userInfo.type) === 3 ? <div><EditFilled /> 学习记录</div> : <div><PieChartFilled /> 统计</div>}</div>
        </div>
        <div className="right">
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default Course;
